<template>
  <!-- 项目编辑对话框 -->
  <el-dialog
    :title="$t('projectDialog.title.create')"
    :visible.sync="projectCreatedDialogVisible"
    width="50%"
    @open="open()"
    :before-close="closeDialogCan"
  >
    <span class="main"
      ><el-form
        ref="createdFormRef"
        :label-position="labelPosition"
        label-width="125px"
        :model="projectCreatedForm"
        :show-message="false"
        :rules="rules"
      >
        <el-form-item :label="$t('projectDialog.form.type')" prop="client_id">
          <el-select
            filterable
            v-model="projectCreatedForm.type"
            :placeholder="$t('projectDialog.form.select')"
            @change="hostClientId"
          >
            <el-option label="scrapyd" value="1"></el-option>
            <el-option label="python" value="2"></el-option>
            <el-option label="other" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('projectDialog.form.host')" prop="client_id">
          <el-select
            filterable
            v-model="value"
            :placeholder="$t('projectDialog.form.select')"
            @change="hostClientId"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('projectDialog.form.name')" prop="name">
          <el-input v-model="projectCreatedForm.name"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('projectDialog.form.descript')"
          prop="description"
        >
          <el-input v-model="projectCreatedForm.description"></el-input>
        </el-form-item>

        <!-- <el-form-item label="egg" prop="egg">
          <el-input v-model="projectCreatedForm.egg"></el-input>
        </el-form-item>
        <el-form-item label="configuration" prop="configuration">
          <el-input v-model="projectCreatedForm.configuration"></el-input>
        </el-form-item>
        <el-form-item label="configurable" prop="configurable">
          <el-input v-model="projectCreatedForm.configurable"></el-input>
        </el-form-item> -->
      </el-form>
    </span>

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialogCan">{{
        $t("projectDialog.btn.cancel")
      }}</el-button>
      <el-button type="warning" plain @click="resetForm">{{
        $t("projectDialog.btn.reset")
      }}</el-button>
      <el-button type="primary" @click="projectCreated" style="width: 200px">{{
        $t("projectDialog.btn.create")
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ["projectCreatedDialogVisible"],
  data() {
    return {
      labelPosition: "right",
      // 创建主机表单数据
      projectCreatedForm: {
        id: "",
        client_id: "",
        name: "",
        description: "",
        egg: "",
        configuration: "",
        configurable: "",
        type: "",
      },
      // 验证规则
      rules: {
        name: [
          {
            required: true,
            trigger: "blur",
            message: "项目名不能为空",
          },
        ],
        client_id: [
          {
            required: true,
            trigger: "blur",
            message: "请选择主机",
          },
        ],
      },
      // 主机列表
      options: [],
      // 选择的主机名称
      value: "",
    };
  },
  methods: {
    // 选择主机
    hostClientId() {
      this.projectCreatedForm.client_id = this.value;
    },
    async open() {
      //   获取主机列表
      const { data: res } = await this.$http.get("/host");
      console.log(res);
      this.options = res;
    },
    // 创建项目
    projectCreated() {
      this.$refs.createdFormRef.validate((valid) => {
        if (!valid) return;
        console.log(this.projectCreatedForm);
        this.$http
          .post("/project/created", this.projectCreatedForm)
          .then((res) => {
            if (res.data.code == 1) return this.$message.error("创建失败！");
            this.closeDialog();
            this.resetForm();
            this.$message.success("创建成功！");
          });
      });
    },
    resetForm() {
      this.value = "";
      this.$refs.createdFormRef.resetFields();
    },
    // 关闭弹出框
    closeDialog() {
      this.$emit("closeDialog");
    },
    closeDialogCan(way) {
      this.$emit("closeDialog", way);
    },
  },
};
</script>

<style lang='less' scoped>
</style>